// Colors
$slates: '#f8fafc','#f1f5f9','#e2e8f0','#cbd5e1','#94a3b8','#64748b','#475569','#334155','#1e293b','#0f172a','#020617';
$grays: '#f9fafb','#f3f4f6','#e5e7eb','#d1d5db','#9ca3af','#6b7280','#4b5563','#374151','#1f2937','#111827','#030712';
$zincs: '#fafafa','#f4f4f5','#e4e4e7','#d4d4d8','#a1a1aa','#71717a','#52525b','#3f3f46','#27272a','#18181b','#09090b';
$neutrals: '#fafafa','#f5f5f5','#e5e5e5','#d4d4d4','#a3a3a3','#737373','#525252','#404040','#262626','#171717','#0a0a0a';
$stones: '#fafaf9','#f5f5f4','#e7e5e4','#d6d3d1','#a8a29e','#78716c','#57534e','#44403c','#292524','#1c1917','#0c0a09';
$reds: '#fef2f2','#fee2e2','#fecaca','#fca5a5','#f87171','#ef4444','#dc2626','#b91c1c','#991b1b','#7f1d1d','#450a0a';
$oranges: '#fff7ed','#ffedd5','#fed7aa','#fdba74','#fb923c','#f97316','#ea580c','#c2410c','#9a3412','#7c2d12','#431407';
$ambers: '#fffbeb','#fef3c7','#fde68a','#fcd34d','#fbbf24','#f59e0b','#d97706','#b45309','#92400e','#78350f','#451a03';
$yellows: '#fefce8','#fef9c3','#fef08a','#fde047','#facc15','#eab308','#ca8a04','#a16207','#854d0e','#713f12','#422006';
$limes: '#f7fee7','#ecfccb','#d9f99d','#bef264','#a3e635','#84cc16','#65a30d','#4d7c0f','#3f6212','#365314','#1a2e05';
$greens: '#f0fdf4','#dcfce7','#bbf7d0','#86efac','#4ade80','#22c55e','#16a34a','#15803d','#166534','#14532d','#052e16';
$emeralds: '#ecfdf5','#d1fae5','#a7f3d0','#6ee7b7','#34d399','#10b981','#059669','#047857','#065f46','#064e3b','#022c22';
$teals: '#f0fdfa','#ccfbf1','#99f6e4','#5eead4','#2dd4bf','#14b8a6','#0d9488','#0f766e','#115e59','#134e4a','#042f2e';
$cyans: '#ecfeff','#cffafe','#a5f3fc','#67e8f9','#22d3ee','#06b6d4','#0891b2','#0e7490','#155e75','#164e63','#083344';
$skys: '#f0f9ff','#e0f2fe','#bae6fd','#7dd3fc','#38bdf8','#0ea5e9','#0284c7','#0369a1','#075985','#0c4a6e','#082f49';
$blues: '#eff6ff','#dbeafe','#bfdbfe','#93c5fd','#60a5fa','#3b82f6','#2563eb','#1d4ed8','#1e40af','#1e3a8a','#172554';
$indigos: '#eef2ff','#e0e7ff','#c7d2fe','#a5b4fc','#818cf8','#6366f1','#4f46e5','#4338ca','#3730a3','#312e81','#1e1b4b';
$violets: '#f5f3ff','#ede9fe','#ddd6fe','#c4b5fd','#a78bfa','#8b5cf6','#7c3aed','#6d28d9','#5b21b6','#4c1d95','#2e1065';
$purples: '#faf5ff','#f3e8ff','#e9d5ff','#d8b4fe','#c084fc','#a855f7','#9333ea','#7e22ce','#6b21a8','#581c87','#3b0764';
$fuchsias: '#fdf4ff','#fae8ff','#f5d0fe','#f0abfc','#e879f9','#d946ef','#c026d3','#a21caf','#86198f','#701a75','#4a044e';
$pinks: '#fdf2f8','#fce7f3','#fbcfe8','#f9a8d4','#f472b6','#ec4899','#db2777','#be185d','#9d174d','#831843','#500724';
$roses: '#fff1f2','#ffe4e6','#fecdd3','#fda4af','#fb7185','#f43f5e','#e11d48','#be123c','#9f1239','#881337','#4c0519';

$colorNames: ('slate': $slates,'gray': $grays,'zinc': $zincs,'neutral': $neutrals,'stone': $stones,'red': $reds,'orange': $oranges,'amber': $ambers,'yellow': $yellows,'lime': $limes,'green': $greens,'emerald': $emeralds,'teal': $teals,'cyan': $cyans,'sky': $skys,'blue': $blues,'indigo': $indigos,'violet': $violets,'purple': $purples,'fuchsia': $fuchsias,'pink': $pinks,'rose': $roses);

$colorIndexes: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950;

// page {
// 	@each $name, $colors in $colorNames {
// 		@each $num in $colorIndexes {
// 			$index: index($colorIndexes, $num);
// 			$colorName: --color-#{$name}-#{$num};
// 			#{$colorName}: #{nth($colors, index($colorIndexes, $num))};
// 		}
// 	}
// }

// new rga color
$slate: '248 250 252','241 245 249','226 232 240','203 213 225','148 163 184','100 116 139','71 85 105','51 65 85','30 41 59','15 23 42','2 6 23';
$gray: '249 250 251','243 244 246','229 231 235','209 213 219','156 163 175','107 114 128','75 85 99','55 65 81','31 41 55','17 24 39','3 7 18';
$zinc: '250 250 250','244 244 245','228 228 231','212 212 216','161 161 170','113 113 122','82 82 91','63 63 70','39 39 42','24 24 27','9 9 11';
$neutral: '250 250 250','245 245 245','229 229 229','212 212 212','163 163 163','115 115 115','82 82 82','64 64 64','38 38 38','23 23 23','10 10 10';
$stone: '250 250 249','245 245 244','231 229 228','214 211 209','168 162 158','120 113 108','87 83 78','68 64 60','41 37 36','28 25 23','12 10 9';
$red: '254 242 242','254 226 226','254 202 202','252 165 165','248 113 113','239 68 68','220 38 38','185 28 28','153 27 27','127 29 29','69 10 10';
$orange: '255 247 237','255 237 213','254 215 170','253 186 116','251 146 60','249 115 22','234 88 12','194 65 12','154 52 18','124 45 18','67 20 7';
$amber: '255 251 235','254 243 199','253 230 138','252 211 77','251 191 36','245 158 11','217 119 6','180 83 9','146 64 14','120 53 15','69 26 3';
$yellow: '254 252 232','254 249 195','254 240 138','253 224 71','250 204 21','234 179 8','202 138 4','161 98 7','133 77 14','113 63 18','66 32 6';
$lime: '247 254 231','236 252 203','217 249 157','190 242 100','163 230 53','132 204 22','101 163 13','77 124 15','63 98 18','54 83 20','26 46 5';
$green: '240 253 244','220 252 231','187 247 208','134 239 172','74 222 128','34 197 94','22 163 74','21 128 61','22 101 52','20 83 45','5 46 22';
$emerald: '236 253 245','209 250 229','167 243 208','110 231 183','52 211 153','16 185 129','5 150 105','4 120 87','6 95 70','6 78 59','2 44 34';
$teal: '240 253 250','204 251 241','153 246 228','94 234 212','45 212 191','20 184 166','13 148 136','15 118 110','17 94 89','19 78 74','4 47 46';
$cyan: '236 254 255','207 250 254','165 243 252','103 232 249','34 211 238','6 182 212','8 145 178','14 116 144','21 94 117','22 78 99','8 51 68';
$sky: '240 249 255','224 242 254','186 230 253','125 211 252','56 189 248','14 165 233','2 132 199','3 105 161','7 89 133','12 74 110','8 47 73';
$blue: '239 246 255','219 234 254','191 219 254','147 197 253','96 165 250','59 130 246','37 99 235','29 78 216','30 64 175','30 58 138','23 37 84';
$indigo: '238 242 255','224 231 255','199 210 254','165 180 252','129 140 248','99 102 241','79 70 229','67 56 202','55 48 163','49 46 129','30 27 75';
$violet: '245 243 255','237 233 254','221 214 254','196 181 253','167 139 250','139 92 246','124 58 237','109 40 217','91 33 182','76 29 149','46 16 101';
$purple: '250 245 255','243 232 255','233 213 255','216 180 254','192 132 252','168 85 247','147 51 234','126 34 206','107 33 168','88 28 135','59 7 100';
$fuchsia: '253 244 255','250 232 255','245 208 254','240 171 252','232 121 249','217 70 239','192 38 211','162 28 175','134 25 143','112 26 117','74 4 78';
$pink: '253 242 248','252 231 243','251 207 232','249 168 212','244 114 182','236 72 153','219 39 119','190 24 93','157 23 77','131 24 67','80 7 36';
$rose: '255 241 242','255 228 230','254 205 211','253 164 175','251 113 133','244 63 94','225 29 72','190 18 60','159 18 57','136 19 55','76 5 25';
$indexes: 50,100,200,300,400,500,600,700,800,900,950;
$names:('slate': $slate,'gray': $gray,'zinc': $zinc,'neutral': $neutral,'stone': $stone,'red': $red,'orange': $orange,'amber': $amber,'yellow': $yellow,'lime': $lime,'green': $green,'emerald': $emerald,'teal': $teal,'cyan': $cyan,'sky': $sky,'blue': $blue,'indigo': $indigo,'violet': $violet,'purple': $purple,'fuchsia': $fuchsia,'pink': $pink,'rose': $rose);
 
page {
	@each $name, $colors in $names {
		@each $num in $indexes {
			$index: index($indexes, $num);
			$colorName: --color-#{$name}-#{$num};
			#{$colorName}: #{nth($colors, index($indexes, $num))};
		}
	}
	
	@each $i in 5,10,15,20,25,30,35,40,45,50,55,60,65,70,75,80,85,90,95 {
		--opacity-#{$i}: calc(#{$i} / 100);
	}
}

// 颜色透明度
[class*='bg-'] { --bg-opacity: 1; }
[class*='text-'] { --text-opacity: 1; }
[class*='border-'] { --border-opacity: 1; }
[class*='from-'] { --from-opacity: 1; }
[class*='to-'] { --to-opacity: 1; }
[class*='shadow-'] { --shadow-opacity: 1; }
[class*='active-'] { --active-opacity: 1; }

// [class*='bg-'], [class*='text-'], [class*='border-'], [class*='box-shadow-'], [class*='from-'], [class*='to-'], [class*='shadow-'] {
// 	--color-opacity: 1;
// }

// 颜色透明度 color__xx
// @each $i in 5,10,15,20,25,30,35,40,45,50,55,60,65,70,75,80,85,90,95 {
// 	[class*='__#{$i}'] {
// 		--color-opacity: calc(#{$i} / 100);
// 		--shdow-opacity: calc(#{$i} / 100);
// 	}
// }

@mixin setOpacity($name, $varName) {
	// 颜色透明度 color__xx
	@each $i in 5,10,15,20,25,30,35,40,45,50,55,60,65,70,75,80,85,90,95 {
		.#{$name}__#{$i} {
			#{$varName}: var(--opacity-#{$i});
		}
	}
}


@mixin setOpacityBak($name, $varName) {
	// 颜色透明度 color__xx
	@each $i in 5,10,15,20,25,30,35,40,45,50,55,60,65,70,75,80,85,90,95 {
		[class*='#{$name}__#{$i}'] {
			#{$varName}: calc(#{$i} / 100);
		}
	}
}